<template>
  <div class="goodCon">
    <div class="goodBanner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
        <van-swipe-item v-for="item in goodsDetails.carousel" :key="item.id"
          ><img :src="item.url" alt="" srcset=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="price">
      <p class="p1">
        {{ goodsDetails.goods_name }} <span>￥{{ goodsDetails.price }}</span>
      </p>
      <!-- <p class="p2">所属老板：陈老板</p> -->
      <p class="p4">
        <span>商品卖点：</span><span>{{ goodsDetails.selling_point }}</span>
      </p>
      <p class="p3" v-html="goodsDetails.content"></p>
    </div>

    <div class="priceTotal">
      <van-submit-bar
        :button-text="buttonText"
        :disabled="subFlag"
        @submit="onSubmit"
      >
        <template #default>
          <span>
            合计：<em class="price">￥{{ goodsDetails.price }}</em></span
          >
        </template></van-submit-bar
      >
    </div>
    <div class="loadBox" v-if="loadFlag">
      <van-loading size="50px" type="spinner" vertical text-size="18px">
        加载中...</van-loading
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem, SubmitBar, Loading, Notify, Dialog } from "vant";

Vue.use(Swipe)
  .use(SwipeItem)
  .use(Loading)
  .use(SubmitBar)
  .use(Dialog);
import moment from "moment";
import apiMar from "@/api/api";
export default {
  components: {},
  data() {
    return {
      pp: 18833,
      goodsDetails: {},
      buttonText: "提交订单",
      subFlag: false,
      loadFlag: false,
      timeCurrent: moment().format("HH"),
      active: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    getData() {
      let params = {
        id: this.$route.query.id
      };
      apiMar
        .getGoodsDetails(params)
        .then(res => {
          this.goodsDetails = res;
          this.active = this.goodsDetails.active;
          console.log(this.subFlag, this.active, "12222222222");
          this.buttonText =
            this.goodsDetails.goods_status == 10 ? "提交订单" : "售罄";

          this.subFlag =
            this.goodsDetails.goods_status == 10 &&
            this.active.end >= this.timeCurrent &&
            this.active.start <= this.timeCurrent
              ? false
              : true;
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },

    onSubmit() {
      if (!this.subFlag) {
        if (!JSON.parse(this.$tool.getlocalStorage("userInfo")).is_ali_auth) {
          Dialog.confirm({
            title: "支付宝授权",
            message: "您还没绑定支付宝，去绑定支付宝。",
            confirmButtonText: "去绑定"
          })
            .then(() => {
              this.$router.push({
                path: "/oauth"
              });
            })
            .catch(() => {
              console.log(222223);
            });
        } else {
          this.loadFlag = true;
          let params = {
            goods_id: this.goodsDetails.id
          };
          console.log(params, "222");

          apiMar
            .orderCreate(params)
            .then(res => {
              window.location.href = res;
              // this.loadFlag = false
              // let payment = this.$router.resolve({
              //   path: "payment",
              //   query: { payment: res }
              // });
              // window.open(payment.href, "_blank");

              // 方法二
              // const div = document.createElement("div");
              // div.innerHTML = res;
              // document.body.appendChild(div);
              // document.forms[0].submit(); //重要，这个才是点击跳页面的核心

              // 方法三
              // const blobUrl = window.URL.createObjectURL(res.blob());
              // download(blobUrl);
              // setShareVisible(false);
            })
            .catch(err => {
              this.loadFlag = false;
              // this.$Message.error(err)
              console.log(err, "222");
              Notify({ type: "warning", message: err.message });
            });
        }
      }
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.goodBanner {
  width: 80%;
  margin: 10px auto;

  img {
    display: block;
    width: 100%;
  }
}

.price {
  width: 90%;
  margin: 10px auto;

  p.p1 {
    font-size: 14px;
    color: #333;
    line-height: 2;

    span {
      display: inline-block;
      margin-left: 12px;
    }
  }

  p.p2 {
    font-size: 13px;
    color: rgba(102, 102, 102, 1);
  }

  p.p3 {
    font-size: 13px;
    margin-top: 18px;
    line-height: 1.4;
    color: rgba(102, 102, 102, 1);
  }

  p.p4 {
    font-size: 13px;
    color: rgba(102, 102, 102, 1);
    display: flex;
    flex-direction: row;
    line-height: 1.2;

    span:first-child {
      width: 67px;
    }

    span:last-child {
      flex: 1;
    }
  }
}

.loadBox {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}

.price {
  color: red;
  font-size: 20px;
  font-style: normal;
  margin-right: 20px;
}
</style>
